<!--
 * @Author: wangwang 2723008256@qq.com
 * @Date: 2022-05-09 14:24:22
 * @LastEditors: 番茄炒蛋蛋 wzh15802755802@163.com
 * @LastEditTime: 2024-03-14 15:03:50
 * @FilePath: \jzjy\src\views\DashBoard\searchRes.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container">
    <div class="topTitle">
      <!-- <h1>{{ value }}</h1>
      <p>
        为您找到相关结果<span>{{ retCounts }}</span
        >条
      </p> -->
      <!-- <p>没有为您找到<a style="color:red;font-weight:600"> {{value}} </a>相关的内容，为您自动推荐了以下相关内容</p> -->
    </div>
    <div class="content">
      <div class="ResBox">
        <div class="box" v-for="item in lists" :key="item.id">
          <div class="left">
            <img
              src="../../assets/img/ziyuan.png"
              v-if="item.lx == 2"
              style="height: 80px"
            />
            <img
              src="../../assets/img/resFile (1).png"
              alt="file_url"
              v-if="
                item.suffix == 'ppt' ||
                item.suffix == 'pptx' ||
                item.suffix == 'ppsx' ||
                item.suffix == 'pps'
              "
            />
            <img
              src="../../assets/img/resFile (2).png"
              alt="file_url"
              v-if="item.suffix == 'mp4' || item.suffix == 'rm'"
            />
            <img
              src="../../assets/img/resFile (3).png"
              alt="file_url"
              v-if="item.suffix == 'xls' || item.suffix == 'xlsx'"
            />
            <img
              src="../../assets/img/resFile (4).png"
              alt="file_url"
              v-if="item.suffix == 'zip' || item.suffix == 'rar'"
            />
            <img
              src="../../assets/img/resFile (5).png"
              alt="file_url"
              v-if="item.suffix == 'm4a' || item.suffix == 'mp3'"
            />
            <img
              src="../../assets/img/resFile (6).png"
              alt="file_url"
              v-if="item.suffix == 'doc' || item.suffix == 'docx'"
            />
            <img
              src="../../assets/img/resFile (7).png"
              alt="file_url"
              v-if="item.suffix == 'pdf'"
            />
            <img
              src="../../assets/img/resFile (8).png"
              alt="file_url"
              v-if="item.suffix == 'png' || item.suffix == 'jpg'"
            />
          </div>
          <div class="details">
            <div class="title">
              <h3 @click="gokejianbaoRes(item.id, item.suffix)">
                <span v-if="item.is_tj == 1">推荐</span>
                <div class="ceshi">{{ item.title }}</div>
              </h3>
            </div>
            <div class="msg">
              <p>{{ item.intro }}</p>
              <div class="bottom">
                <!-- <span class="rate"
                  ><span style="margin-right: 5px">精选指数</span>
                  <el-rate disabled v-model="item.tjzs"></el-rate
                ></span> -->
                <span class="seeNum"
                  ><i class="el-icon-view"></i>{{ item.viewCount }}</span
                >
                <!-- <span class="recNum"
                  >共<a>{{ item.kejian_nums }}</a
                  >份资源</span
                > -->
              </div>
            </div>
          </div>
          <div class="seeAll" @click="gokejianbaoRes(item.id, item.suffix)">
            <span>查看全部</span>
          </div>
        </div>
        <div class="downAll" @click="downLoad">整包下载</div>
        <!-- <div class="nothing" v-if="!fyShow">
          <img src="../../assets/img/nothing.png" alt="" />
        </div>
        <div class="page1" v-if="fyShow">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            background
            :page-sizes="[5, 15, 20]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="retCounts"
          >
          </el-pagination>
        </div> -->
      </div>
      <div class="right">
        <div class="resou">
          <span></span>
          <h2>热门搜索榜</h2>
        </div>
        <ul>
          <li
            v-for="(item, index) in resouLists"
            :key="index"
            @click="search(item.title)"
          >
            <span v-if="index == 0" style="background: #f85230">{{
              index + 1
            }}</span>
            <span v-if="index == 1" style="background: #f88e4a">{{
              index + 1
            }}</span>
            <span v-if="index == 2" style="background: #f8cd4a">{{
              index + 1
            }}</span>
            <span v-if="index > 2" style="background: #fff; color: #939599">{{
              index + 1
            }}</span>
            {{ item.title }}
          </li>
        </ul>
      </div>
      <!-- 下载登录弹窗 -->
      <el-dialog
        :visible.sync="dialogVisible"
        width="500px"
        :before-close="handleClose"
        custom-class="login"
      >
        <LoginTc />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  list_kejian,
  nowkemu,
  keywordslists,
  info_kejian,
  plxz_url_arr,
  islogin,
} from "../../api/http";
import { timeStamp2String } from "../../utils/time";
import LoginTc from "../../layout/components/loginTc.vue";
export default {
  inject: ["reload"], //刷新页面
  components: {
    LoginTc,
  },
  data() {
    return {
      value: "", //搜索内容
      lists: [], //搜索结果列表
      timeStamp2String,
      retCounts: 0, //总数
      currentPage: 1, //默认第几页
      page: 1, //页数
      page_size: 5, //meiye duoshao
      kejianversions_id: "", //版本id
      kemu_id: "", //科目id
      resouLists: [], //热搜词列表
      fyShow: false, //分页是否展示
      idArr: [], //需要下载的课件数组
      loginStatus: "", //是否登录
      dialogVisible: false, //登录弹窗展示
    };
  },
  created() {
    console.log(this.$route.query);
    this.kejianversions_id = JSON.parse(
      this.$route.query.banben.replace('"([^"]*)"', "$1")
    );
    this.kemu_id = JSON.parse(
      this.$route.query.kemu_id.replace('"([^"]*)"', "$1")
    );
    // //重定向导航栏active样式
    // const str = this.$route.path.split("/");
    // this.activeIndex = "/" + str[1];
    let obj = this.$route.query.ids.replace('"([^"]*)"', "$1");
    this.idArr = JSON.parse(obj);
    const arr = JSON.parse(obj);
    list_kejian({
      md5key: localStorage.getItem("md5key"),
      ids: arr,
    }).then((res) => {
      console.log(res);
      this.lists = res.retRes;
    });
    islogin({
      md5key: localStorage.getItem("md5key"),
    }).then((res) => {
      this.loginStatus = res.retRes.login_status;
    });
    //热搜榜
    keywordslists({
      md5key: localStorage.getItem("md5key"),
      kemu_id: this.kemu_id,
      kejianversions_id: this.kejianversions_id,
    }).then((res) => {
      if (res.retInt == 1) {
        console.log(res, "热搜词");

        if (res.retRes.length > 10) {
          this.resouLists = res.retRes.slice(0, 10);
        } else {
          this.resouLists = res.retRes;
        }
      } else {
        this.$message({
          message: res.retErr,
        });
      }
    });
  },
  methods: {
    downLoad() {
      if (this.loginStatus == 1) {
        //当前已选中课件的下载链接数组
        plxz_url_arr({
          md5key: localStorage.getItem("md5key"),
          kejianbao_id: this.kejianbao_id,
          ids: this.idArr,
        }).then((res) => {
          console.log(res, "xiazai链接数组");
          this.urlArr = res.retRes;
          this.urlArr.forEach((item) => {
            this.downloadFile(item);
          });
        });
        
      } else {
        this.dialogVisible = true;
      }
    },
    downloadFile(url) {
      const iframe = document.createElement("iframe");
      iframe.style.display = "none";
      iframe.style.height = 0;
      iframe.src = url;
      document.body.appendChild(iframe);
      // 1s之后删除
      setTimeout(() => {
        iframe.remove();
      }, 1000);
    },
    //关闭登录弹窗
    handleClose() {
      this.dialogVisible = false;
    },
    //前往课件详情
    gokejianbaoRes(id, suffix) {
      if (suffix != "zip" && suffix != "rar") {
        let { href } = this.$router.resolve({
          path: "/resource/resDetails",
          query: {
            id: id,
          },
        });
        window.open(href, "_blank");
      } else {
        let { href } = this.$router.resolve({
          path: "/resource/zipResDetails",
          query: {
            id: id,
          },
        });
        window.open(href, "_blank");
      }
    },
    //更改每页条数
    handleSizeChange(val) {
      console.log(val, "每页多少条");
      this.page_size = val;
      list_kejian({
        md5key: localStorage.getItem("md5key"),
        title: this.value,
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        console.log(res);
        setTimeout(() => {
          this.lists = res.retRes;
          this.retCounts = res.retCounts;
        }, 200);
      });
    },
    //更改页数
    handleCurrentChange(val) {
      console.log(val, "第几页");
      this.page = val;
      list_kejian({
        md5key: localStorage.getItem("md5key"),
        title: this.value,
        page: this.page,
        page_size: this.page_size,
      }).then((res) => {
        console.log(res);
        setTimeout(() => {
          this.lists = res.retRes;
          this.retCounts = res.retCounts;
        }, 200);
      });
    },
    //点击热搜词
    search(title) {
      this.$router.push({
        name: "SearchRes",
        query: {
          keyword: title,
        },
      });
      this.reload(); //刷新页面
    },
  },
};
</script>
<style>
/* 用于分页 */
.el-select-dropdown__item.selected {
  color: #08a579 !important;
}
.el-pagination__editor.el-input .el-input__inner {
  border-color: #ccc;
}
.page1 {
  width: 1200px;
  margin: 0 auto;
}
.el-pagination {
  text-align: left;
  margin: 20px 80px 20px 54px;
}
.el-select .el-input.is-focus .el-input__inner {
  border-color: #08a579 !important;
}
.el-pagination .el-select .el-input .el-input__inner:hover {
  border-color: #08a579 !important;
}
.el-select .el-input__inner:focus {
  border-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff;
}
.el-pager li:hover {
  color: #08a579 !important;
}
.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
  color: #fff !important;
}
</style>
<style lang="less" scoped>
#container {
  .topTitle {
    width: 1200px;
    // margin: 10px auto;
    h1 {
      // margin-bottom: 10px;
      margin: 10px 0;
      font-size: 20px;
    }
    p {
      font-size: 15px;
      color: #666;
      span {
        color: red;
        font-weight: 900;
      }
    }
  }
  .content {
    display: flex;
    width: 1200px;
    margin: 0 auto;
    .ResBox {
      margin-top: 30px;
      margin-bottom: 30px;
      width: 900px;
      background-color: #fff;
      border-radius: 10px;
      .box {
        display: flex;
        // justify-content: space-between;
        align-items: center;
        padding: 40px;
        border-bottom: 1px dashed #e6e6e6;
        .left {
          margin-right: 40px;
          img {
            width: 74px;
            height: 84px;
          }
        }
        .details {
          position: relative;
          top: -5px;
          margin-right: 64px;
          // display: flex;
          // flex-direction: column;
          // justify-content: space-between;
          min-height: 84px;
          width: 60%;
          cursor: pointer;
          .title {
            display: flex;
            margin: 0;
            margin-bottom: 10px;
            span {
              display: inline-block;
              margin-top: 2px;
              text-align: center;
              line-height: 20px;
              width: 40px;
              height: 20px;
              background: #f85230;
              border-radius: 4px;
              font-size: 14px;
              color: #fff;
            }
            h3 {
              display: flex;
              font-weight: normal;
              font-size: 16px;
              color: #333;
            }
          }
          .msg {
            p {
              font-size: 14px;
              color: #626366;
            }
            .bottom {
              display: flex;
              align-items: center;
              margin-top: 20px;
              color: #939599;
              font-size: 12px;
              .rate {
                display: flex;
                margin-right: 38px;
                width: 148px;
              }
              /deep/.el-rate__icon {
                margin-right: 0;
              }
              .upTime {
                margin-right: 15px;
              }
              .seeNum {
                i {
                  margin-right: 5px;
                }
              }
            }
          }
        }
        .details:hover {
          .title {
            h3 {
              color: #08a579;
            }
          }
        }
        .seeAll {
          position: relative;
          height: 110px;
          border-left: 1px solid #e6e6e6;
          cursor: pointer;
          span {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            margin-left: 40px;
            display: inline-block;
            width: 96px;
            height: 28px;
            background: #08a579;
            border-radius: 14px;
            text-align: center;
            color: #fff;
            font-size: 12px;
            line-height: 28px;
          }
        }
      }
      .downAll {
        margin: 10px 0;
        margin-left: 760px;
        font-size: 16px;
        color: #fff;
        width: 120px;
        height: 48px;
        line-height: 48px;
        background-color: #08a579;
        text-align: center;
        cursor: pointer;
        border-radius: 5px;
      }
      .nothing {
        margin: 100px auto;
        text-align: center;
        width: 400px;
      }
    }
    /deep/.el-dialog {
      border-radius: 20px;
      overflow: hidden;
    }
    /deep/.el-dialog__headerbtn .el-dialog__close {
      margin-right: 10px;
      color: #c0c1c5;
      font-size: 18px;
      font-weight: 600;
    }
    /deep/.el-dialog__headerbtn {
      right: 36px;
    }
    .right {
      margin-top: 30px;
      margin-left: 20px;
      border-radius: 10px;
      width: 280px;
      height: 470px;
      background-color: #fff;
      .resou {
        display: flex;
        margin-top: 20px;
        span {
          display: inline-block;
          position: relative;
          top: 3px;
          margin-right: 8px;
          width: 4px;
          height: 20px;
          background: #08a579;
          border-radius: 2px;
        }
      }
      ul {
        margin-top: 20px;
        margin-left: 15px;
        li {
          line-height: 40px;
          font-size: 15px;
          cursor: pointer;
          color: #333;
          width: 260px;
          span {
            display: inline-block;
            text-align: center;
            margin-right: 5px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            background-color: orange;
            font-size: 14px;
            color: #fff;
            font-weight: 600;
          }
        }
        li:hover {
          color: #08a579;
        }
      }
    }
  }
}
</style>



